<template>
  <div class="category">
    <nav-bar>
      <div slot="center">分类</div>
    </nav-bar>

    <div class="section">
      <!-- 接收子组件的id，用来获取指定id的数据 -->
      <cate-left :list="list" @id="id"></cate-left>
      <cate-right :cateInfo="cateInfo"></cate-right>
    </div>
  </div>
</template>

<script>
import NavBar from "@/components/common/navbar/NavBar";
import CateLeft from "./cateLeft.vue";
import CateRight from "./cateRight.vue";
import { getCategory, getCategoryInfo } from "../../network/category";
export default {
  name: "category",
  //组件
  components: {
    NavBar,
    CateLeft,
    CateRight,
  },
  data() {
    return {
      list: [],
      cateInfo: [],
      //网络数据请求id
      cateId: "",
    };
  },
  created() {
    getCategory().then((res) => {
      //console.log("category 数据", res);
      const data = res.data.data;
      this.list = data.category.list;
      //console.log(this.list);
    });
    //cateId 为网络数据请求id
    getCategoryInfo(/*this.cateId*/).then((res) => {
      //console.log("Info 数据", res);
      const data = res.data.data;
      this.cateInfo = data.list;
      //console.log(data.list);
    });
  },
  methods: {
    id(vul) {
      //console.log(vul);
      this.cateId = vul;
    },
  },
  watch: {
    //由于没准备有合适的分类数据，所以用打乱现有的数组数据来实现切换类型的的效果
    cateId() {
      this.cateInfo.sort(() => {
        return Math.random() > 0.5 ? -1 : 1;
      });
    },
  },
};
</script>

<style scoped>
.section {
  height: calc(100vh - 52px - 44px);
  display: flex;
  flex-flow: row;
  margin-top: 44px;
  border-bottom: 1px solid white;
  box-sizing: border-box;
}
</style>